import { useState, useEffect, useRef } from 'react';
import './App.css';

// 公积金
const oneAudioList = [
  { text: '您好，请问有什么可以帮您？您可以直接说公积金、医保、社保、查询进度等。', length: 8 },
  { text: '公积金。', length: 2 },
  { text: '您好，请问您是要咨询公积金哪方面问题？请您简单描述一下，如公积金提取、商贷转公贷、贷款额度、贷款条件、贷款利率等。', length: 12 },
  { text: '嗯，公积金提取怎么办理呀？', length: 5 },
  { text: '提取有不同方式，未匹配适合您的提取方式。为了方便您顺利办理业务，需要向您核实几个问题。请问您名下在本地有房产吗？比如商品房、二手房、保障性住房、拆迁房等，请直接回答“有”或“没有”。', length: 19 },
  { text: '有。', length: 1 },
  { text: '那可以通过了解您在本地这套房屋来判断是否满足提取条件。请问您的房屋有贷款吗？', length: 8 },
  { text: '有的。', length: 2 },
  { text: '有的话是公积金贷款、组合贷款还是商业贷款？', length: 5 },
  { text: '公积金贷款。', length: 2 },
  { text: '您好，偿还本市住房公积金贷款，借款人及配偶需提供身份证明材料。共有产权的共同借款人及配偶，还需提供商品房销售合同。只要您正常还款一个月，下个月就能申请提取公积金。不光您自己，您配偶一起买房并签了贷款的人和他配偶都能提取两次。提取间隔不少于一个月，所有提取人提取总额不超过该笔贷款以正常偿还的月供总额度。职工每提前还贷一次，可办理一次提取。所有提取人提取总额度不超过该次提前还贷的金额，结清后可再提取一次，相当于把之前没提完的额度清空。如有需要，请说“重听”。', length: 49 },
  { text: '嗯，可以去哪里办理呀？', length: 2 },
  { text: '请问您是想咨询提取公积金的渠道吗？', length: 4 },
  { text: '对的。', length: 1 },
  { text: '您好，公积金现在已开通网上提取渠道，如住房公积金中心官网。您也可以携带提取的相关材料，到公积金大厅柜台现场办理，无需预约。请问还有其他可以帮您的吗？', length: 16 },
  { text: '没有了，谢谢。', length: 2 },
  { text: '感谢您的来电，若有其他诉求，请拨打12345。', length: 5 },
];

const twoAudioList = [
  { text: '您好，请问有什么可以帮您？您可以直接说公积金、医保、社保、查询进度等。', length: 8 },
  { text: '医保。', length: 1 },
  { text: '请问您具体想咨询哪方面的医保问题？例如医保参保、医保报销、医保停保、生育保险等。', length: 9 },
  { text: '医保报销。', length: 2 },
  { text: '请问您属于职工医保，居民医保还是大学生医保？', length: 5 },
  { text: '职工医保。', length: 2 },
  { text: '请问您想咨询住院报销、门诊统筹报销，还是门诊慢特病报销？请逐一说出您想咨询的问题。', length: 10 },
  { text: '门诊报销。', length: 2 },
  {
    text:
      '您好，职工自用人单位缴纳基本医疗保险费的次月起，享受基本医疗保险待遇。一个医疗年度内，职工参保人发生的普通门诊合规医疗费用具体报销标准如下：' +
      '三级定点医疗机构起付标准为800元，超过800元部分报销60%；' +
      '二级定点医疗机构起付标准为400元，超过400元部分报销70%；' +
      '一级定点医疗机构及定点社区卫生服务机构起付标准为200元，超过200元部分报销80%。' +
      '最高报销限额为6000元。若属于退休职工，统筹支付比例提高5个百分点；建国前老工人统筹支付比例在退休职工的基础上再提高5个百分点。' +
      '中医定点医疗机构的起付标准降低20%，退休职工普通门诊统筹年度支付限额提高至7000元。' +
      '如有需要，请说“重听”。',
    length: 63,
  },
  { text: '没有了，谢谢。', length: 2 },
  { text: '请问您对我的服务满意吗？', length: 3 },
  { text: '满意。', length: 1 },
  { text: '感谢您的来电，祝您生活愉快。', length: 3 },
];

// 男声
const threeAudioList = [
  { text: '您好，请问有什么可以帮您？您可以直接说公积金、医保、社保、查询进度等。', length: 8 },
  { text: '我是想查公积金提取。', length: 1 },
  { text: '提取有不同方式，未匹配适合您的提取方式。为了方便您顺利办理业务，需要向您核实几个问题。请问您家庭名下在济南有房产吗？比如商品房、二手房、改商性住房、拆迁房等，请直接回答“有”或“没有”。', length: 9 },
  { text: '有。', length: 2 },
  { text: '那可以通过了解您在济南这套房屋的情况来判断是否满足提取条件。请问您的房屋有贷款吗？', length: 5 },
  { text: '有的。', length: 2 },
  { text: '有的话，是公积金贷款、组合贷款还是商业贷款？', length: 10 },
  { text: '组合贷款。', length: 2 },
  {
    text:
      '嗯，您好，偿还组合贷款，只要您正常还完一个月月供，下个月就能申请提取公积金。可以提取您自己、您配偶及共有产权的共同借款人和配偶的住房公积金。两次提取间隔不少于一个月。所有提取人提取总额度不超过该笔贷款已正常偿还的月供。总额度不包括部分提前还贷部分。职工每提前还贷一次，可办理一次提取。所有提取人提取总额度不超过该次提前还贷的金额。结清后可再提取一次，相当于把之前没提完的额度清空。也可以携带提取的相关材料到公积金大厅柜台现场办理。' +
      '所需材料为：主贷人及夫妻双方需带身份证、商业贷款房贷合同、银行近三个月盖章的还款记录；一起买房并签了贷款的人和他配偶也需带身份证、商业贷款房贷合同、银行近三个月盖章的还款记录，也就是加上购房合同原件。如有需要，请说“重听”。',
    length: 63,
  },
  { text: '没有了，谢谢。', length: 2 },
  { text: '请问您对我的服务满意吗？', length: 3 },
  { text: '满意。', length: 1 },
  { text: '感谢您的来电，祝您生活愉快。', length: 3 },
];

const parseTimeToText = (time) => {
  if (time < 10) {
    return '00:0' + time;
  }
  if (time < 60) {
    return '00:' + time;
  }

  const minute = Math.floor(time / 60);
  const second = time % 60;
  return `0${minute}:${second < 10 ? '0' + second : second}`;
};

let timer;

function App() {
  const time = useRef(0);
  const [timeText, setTimeText] = useState('00:00');
  const [isHuman, setIsHuman] = useState(false);
  const [stop, setStop] = useState(true);
  // 当前播放的索引
  const [audioIndex, setAudioIndex] = useState(-1);
  // 当前播放语音地址
  const [audioPath, setAudioPath] = useState();
  // 重播索引
  const [replayIndex, setReplayIndex] = useState(-1);
  // 模拟客服机器人数据
  const [robots, setRobots] = useState([]);
  // 当前选择机器人
  const [robot, setRobot] = useState([]);
  // 模拟当前对话数据
  const [conversation, setConversation] = useState([]);

  const audioRef = useRef(null);
  const messageContentRef = useRef(null);

  // 导入音频文件
  useEffect(() => {
    // 公积金
    const audioOneRobotModules = import.meta.glob('./assets/audio/one/robot/*.{MP3,mp3}', { eager: true });
    const audioOneUserModules = import.meta.glob('./assets/audio/one/user/*.{MP3,mp3}', { eager: true });
    const oneRobotFiles = Object.entries(audioOneRobotModules).map(([path, module]) => ({
      name: path.replace(/^.*[\\/]/, ''),
      path: module.default,
    }));
    const oneUserFiles = Object.entries(audioOneUserModules).map(([path, module]) => ({
      name: path.replace(/^.*[\\/]/, ''),
      path: module.default,
    }));

    let index = 0;
    const messages1 = [],
      messages2 = [], messages3 = [];
    while (index < oneRobotFiles.length + oneUserFiles.length) {
      if (index % 2 === 0) {
        messages1.push({
          id: 'robot-' + index / 2,
          sender: 'robot',
          content: oneAudioList[index].text,
          time: '2025-09-03 16:18',
          path: oneRobotFiles[index / 2].path,
          duration: oneAudioList[index].length,
          width: Math.max(oneAudioList[index].length / 20, 0.2) * 300,
        });
      } else {
        messages1.push({
          id: 'user' + (index - 1) / 2,
          sender: 'user',
          content: oneAudioList[index].text,
          time: '2025-09-03 16:18',
          path: oneUserFiles[(index - 1) / 2].path,
          duration: oneAudioList[index].length,
          width: Math.max(oneAudioList[index].length / 20, 0.2) * 300,
        });
      }
      index++;
    }
    index = 0;
    // 医保
    const audioTwoeRobotModules = import.meta.glob('./assets/audio/two/robot/*.{MP3,mp3}', { eager: true });
    const audioTwoUserModules = import.meta.glob('./assets/audio/two/user/*.{MP3,mp3}', { eager: true });
    const twoRobotFiles = Object.entries(audioTwoeRobotModules).map(([path, module]) => ({
      name: path.replace(/^.*[\\/]/, ''),
      path: module.default,
    }));
    const twoUserFiles = Object.entries(audioTwoUserModules).map(([path, module]) => ({
      name: path.replace(/^.*[\\/]/, ''),
      path: module.default,
    }));

    while (index < twoRobotFiles.length + twoUserFiles.length) {
      if (index % 2 === 0) {
        messages2.push({
          id: 'robot-' + index / 2,
          sender: 'robot',
          content: twoAudioList[index].text,
          time: '2025-09-03 16:18',
          path: twoRobotFiles[index / 2].path,
          duration: twoAudioList[index].length,
          width: Math.max(twoAudioList[index].length / 20, 0.2) * 300,
        });
      } else {
        messages2.push({
          id: 'user' + (index - 1) / 2,
          sender: 'user',
          content: twoAudioList[index].text,
          time: '2025-09-03 16:18',
          path: twoUserFiles[(index - 1) / 2].path,
          duration: twoAudioList[index].length,
          width: Math.max(twoAudioList[index].length / 20, 0.2) * 300,
        });
      }
      index++;
    }

    // 公积金-男
    const audioThreeRobotModules = import.meta.glob('./assets/audio/three/robot/*.{MP3,mp3}', { eager: true });
    const audioThreeUserModules = import.meta.glob('./assets/audio/three/user/*.{MP3,mp3}', { eager: true });
    const threeRobotFiles = Object.entries(audioThreeRobotModules).map(([path, module]) => ({
      name: path.replace(/^.*[\\/]/, ''),
      path: module.default,
    }));
    const threeUserFiles = Object.entries(audioThreeUserModules).map(([path, module]) => ({
      name: path.replace(/^.*[\\/]/, ''),
      path: module.default,
    }));
    index = 0;
    while (index < threeRobotFiles.length + threeUserFiles.length) {
      if (index % 2 === 0) {
        messages3.push({
          id: 'robot-' + index / 2,
          sender: 'robot',
          content: threeAudioList[index].text,
          time: '2025-09-03 16:18',
          path: threeRobotFiles[index / 2].path,
          duration: threeAudioList[index].length,
          width: Math.max(threeAudioList[index].length / 20, 0.2) * 300,
        });
      } else {
        messages3.push({
          id: 'user' + (index - 1) / 2,
          sender: 'user',
          content: threeAudioList[index].text,
          time: '2025-09-03 16:18',
          path: threeUserFiles[(index - 1) / 2].path,
          duration: threeAudioList[index].length,
          width: Math.max(threeAudioList[index].length / 20, 0.2) * 300,
        });
      }
      index++;
    }

    setRobots([
      {
        id: 1,
        robotName: '智能客服-A1',
        robotStatus: 'online',
        robotLastActive: '2025-09-03 16:18',
        phoneNumber: '182****8865',
        duration: '02:23',
        messages: messages3,
      },
      {
        id: 2,
        robotName: '智能客服-A2',
        robotStatus: 'online',
        robotLastActive: '2025-09-03 16:18',
        phoneNumber: '133****3213',
        duration: '02:23',
        messages: messages1,
      },
      {
        id: 3,
        robotName: '智能客服-A3',
        robotStatus: 'online',
        robotLastActive: '2025-09-03 16:18',
        phoneNumber: '187****8765',
        duration: '01:51',
        messages: messages2,
      },
    ]);
  }, []);

  useEffect(() => {
    if (audioIndex > -1) {
      setConversation([...conversation, robot.messages[audioIndex]]);
      setAudioPath(robot.messages[audioIndex].path);
      setStop(false);
      setTimeout(() => {
        audioRef.current.play();
        messageContentRef.current.scrollTo({
          top: messageContentRef.current.scrollHeight,
          behavior: 'smooth',
        });
      }, 200);
    }
  }, [audioIndex]);

  const resetTime = () => {
    clearInterval(timer);
    time.current = 0;
    setTimeText('00:00');
  };

  const onRobotSelected = (robot) => {
    audioRef.current.pause();
    resetTime();
    setIsHuman(false);
    setAudioIndex(-1);
    setConversation([]);
    setRobots(robots.map((v) => ({ ...v, robotStatus: v.id === robot.id ? 'busy' : 'online' })));
    setRobot({ ...robot, robotStatus: 'busy' });
    setTimeout(() => {
      setAudioIndex(0);
      timer = setInterval(() => {
        time.current += 1;
        setTimeText(parseTimeToText(time.current));
      }, 1000);
    }, 500);
  };

  // 语音播放完毕
  const onAudioEnded = () => {
    setStop(true);
    setReplayIndex(-1);
    if (!isHuman) {
      if (audioIndex < robot.messages.length - 1) {
        setAudioIndex(audioIndex + 1);
      } else {
        clearInterval(timer);
        setRobot({ ...robot, robotStatus: 'online' });
      }
    }
  };

  // 转人工
  const toHuman = () => {
    audioRef.current.pause();
    setIsHuman(true);
    resetTime();
    setStop(true);
    setTimeout(() => {
      messageContentRef.current.scrollTo({
        top: messageContentRef.current.scrollHeight,
        behavior: 'smooth',
      });
    }, 200);
  };

  const replay = (item, i) => {
    setReplayIndex(i);
    setAudioPath(item.path);
  };

  return (
    <div className="app">
      <div className="app-main">
        <div className="header">
          <h1>能"听懂"市民诉求的客服机器人</h1>
          <p>基于AI语音识别，精准解析市民电话诉求，并提供7x24小时的高效查询与办理服务</p>
        </div>

        <div className="main-content">
          <div className="left-panel">
            <h2>客服机器人列表</h2>
            <div className="robots-list">
              {robots.map((item) => (
                <div key={item.id} className={`robot-item ${robot.id === item.id ? 'active' : ''} ${item.robotStatus}`} onClick={() => onRobotSelected(item)}>
                  <div className="robot-info">
                    <div className="robot-avatar"></div>
                    <div className="robot-details">
                      <div className="robot-name">{item.robotName}</div>
                      <div className="robot-status">
                        <span className={`status-indicator ${item.robotStatus}`}></span>
                        <span className="status-text">{item.robotStatus === 'online' ? '在线-空闲' : item.robotStatus === 'busy' ? '忙碌-通话中' : '离线'}</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="right-panel">
            <div className="conversation-header">
              <h2>与{robot.robotName || '--'}的对话</h2>
              <div className="conversation-info">
                <div className="conversation-info-left">
                  <span className="phone-number">
                    <span>来电号码: </span>
                    <span className="highlight">{robot.phoneNumber || '--'}</span>
                  </span>
                  <span className="duration">
                    <span>通话时长: </span>
                    <span className="highlight">{timeText}</span>
                  </span>
                </div>
                <a className="transfer-btn" onClick={toHuman}>
                  转接人工客服
                </a>
              </div>
            </div>

            <div className={`conversation-content ${stop ? '' : 'pending'}`} ref={messageContentRef}>
              {conversation.map((msg, i) => (
                <div key={msg.id} className={`message ${msg.sender} ${replayIndex === i ? 'replaying' : ''}`}>
                  <div className="message-avatar"></div>
                  <div className="message-container">
                    <div className="message-header">
                      <span className="message-sender">{msg.sender === 'robot' ? robot.robotName : '市民'}</span>
                      <span className="message-time">{msg.time}</span>
                    </div>
                    <div className="message-content" style={{ width: msg.width }} onClick={() => stop && replay(msg, i)}>
                      <div className="audio-duration">{msg.duration === 63 ? '01:03' : msg.duration < 10 ? '00:0' + msg.duration : '00:' + msg.duration}</div>
                    </div>
                    <div className="audio-text">{msg.content}</div>
                  </div>
                </div>
              ))}
              {isHuman && <div className="split-line">转接至人工客服</div>}
            </div>
          </div>
        </div>
      </div>
      <audio ref={audioRef} src={audioPath} autoPlay onEnded={onAudioEnded}></audio>
    </div>
  );
}

export default App;
